<template>
  <div id="homePage">
    <!-- 上方搜索栏-->
    <div class="search-bar">
      <!-- 根据图片名称或简介搜索-->
      <a-input-search
        v-model:value="queryParams.searchText"
        placeholder="搜索海量图片"
        enter-button
        @search="onSearch"
        size="large"
      />
      <!-- 根据分类搜索-->
      <a-tabs v-model:activeKey="checkCategory" @change="onSearch">
        <a-tab-pane key="all" tab="全部" />
        <a-tab-pane v-for="category in categoryList" :key="category" :tab="category" />
      </a-tabs>
      <!-- 根据标签搜索-->
      <span style="margin-right: 8px">标签:</span>
      <a-space :size="[0, 8]" wrap>
        <a-checkable-tag
          v-for="(tag, index) in tagList"
          :key="tag"
          :tab="tag"
          v-model:checked="checkTag[index]"
          @change="onSearch"
        >
          {{ tag }}
        </a-checkable-tag>
      </a-space>
    </div>

    <!--    引用图片子组件,向子组件传值-->
    <PicList :picture-list="pictureList" :loading="loading" :privateShow="false" />
    <!--    分页-->
    <a-pagination
      style="text-align: right"
      v-model:current="queryParams.current"
      v-model:page-size="queryParams.pageSize"
      :total="total"
      @change="onChange"
    ></a-pagination>
  </div>
</template>

<script lang="ts" setup>
// 定义表格数据
import { onMounted, reactive, ref } from 'vue'
import { listPictureTagCategoryUsingGet, userPicPageUsingPost } from '@/api/fileController.ts'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import PicList from '@/components/PicList.vue'

const router = useRouter()

// 转圈
const loading = ref(true)
// 分页查询结果
const pictureList = ref<API.PictureVO[]>([])
// 定义总条数
const total = ref(0)

// 存储分类
const categoryList = ref<string[]>([])
// 存储选中的分类
const checkCategory = ref<string>('all')
// 存储标签
const tagList = ref<string[]>([])
// 存储选中的标签
const checkTag = ref([])

/**
 * 调用后端获取图片标签的接口
 */
async function listPictureTagCategory() {
  const resp = await listPictureTagCategoryUsingGet()
  if (resp.data.data && resp.data.code === 0) {
    categoryList.value = resp.data.data.categoryList ?? []
    tagList.value = resp.data.data.tagList ?? []
  } else {
    console.log('调用后端获取图片标签的接口失败', resp.data.message)
  }
}

// 定义查询参数,默认1页10条
const queryParams = reactive<API.PictureQueryRequest>({
  current: 1,
  pageSize: 12,
  sortField: 'editTime',
  sortOrder: 'descend',
  name: '',
  category: '',
  tags: [],
})

// 定义分页对象
const onChange = (current: number, pageSize: number) => {
  queryParams.current = current
  queryParams.pageSize = pageSize
  getPageData()
}

// 从后端分页查询数据
async function getPageData() {
  loading.value = true
  const params = { ...queryParams, tags: [] }

  if (checkCategory.value != 'all') {
    params.category = checkCategory.value
  }
  // 搜索标签处理
  checkTag.value.forEach((tag, index) => {
    if (tag) {
      params.tags.push(tagList.value[index])
    }
  })

  const resp = await userPicPageUsingPost(params)
  if (resp.data.code === 0 && resp.data.data) {
    pictureList.value = resp.data.data.records ?? []
    total.value = resp.data.data.total ?? 0

    console.log(pictureList.value)
  } else if (resp.data.data === null) {
    message.error('查询无记录')
  } else {
    message.error('查询图片数据失败,' + resp.data.message)
  }

  loading.value = false
}

// 搜索
function onSearch() {
  queryParams.current = 1
  getPageData()
}

onMounted(() => {
  getPageData()
  listPictureTagCategory()
})
</script>

<style scoped>
#homePage .search-bar {
  max-width: 480px;
  margin: 0 auto 16px;
}
</style>
